import {ChangeEventHandler, FC, useState} from "react";
import {
    Box,
    FormControl,
    FormHelperText,
    Input,
    InputAdornment,
    InputLabel,
    TextField
} from "@mui/material";
import DGDialogLayout from "../../../components/DGDialogLayout/DGDialogLayout.tsx";
import DGDrawerLayout from "../../../components/DGDrawerLayout/DGDrawerLayout.tsx";
import {useNavigate} from "react-router-dom";
import IconButton from "@mui/material/IconButton";
import {Visibility, VisibilityOff} from "@mui/icons-material";
import DGTextView from "../../../components/DGTextView.tsx";
import DGConnect from "../../../sources/DGConnect.ts";
import {Util} from "../../../sources/Util.ts";

interface DGRegPasswordProps {
    state: boolean,
    switchView: (text: string) => void,
}

const DGRegPassword: FC<DGRegPasswordProps> = ({state, switchView}) => {
    // 路由跳转
    const router = useNavigate();
    // 加载状态
    const [loading, setLoading] = useState(false);
    // 密码信息
    const [password1, setPassword1] = useState("");
    // 确认密码信息
    const [password2, setPassword2] = useState("");
    // 错误信息
    const [error1, setError1] = useState({state: false, text: ""});
    // 确认密码错误信息
    const [error2, setError2] = useState({state: false, text: ""});
    // 显示密码
    const [showPwd1, setShowPwd1] = useState(false);
    // 显示确认密码
    const [showPwd2, setShowPwd2] = useState(false);
    // 重新流程
    const [step, setStep] = useState(false);

    // 重新流程
    const handleReturn = () => {
        // 切换面板
        switchView("reg_index");
        // 设置流程
        setStep(false);
        // 清空密码1信息
        setPassword1("");
        // 清空密码2信息
        setPassword2("");
        // 清空密码错误信息
        setError1({state: false, text: ""});
        // 清空密码错误信息
        setError2({state: false, text: ""});
    }

    // 关闭函数
    const handleClose = () => {
        // 关闭面板
        switchView("");
        // 后退
        router(-1);
    }

    // 更改密码操作
    const handleChangePwd1: ChangeEventHandler<HTMLInputElement> = e => {
        // 清空密码错误信息
        setError1({state: false, text: ""});
        // 更改输入信息
        setPassword1(e.target.value);
        // 判断密码输入是否低于 6 位
        if (e.target.value !== "" && e.target.value.length < 6) return setError1({
            state: true, text: "密码不能低于 6 位！"
        });
        // // 判断密码输入是否大于 18 位
        // if (e.target.value !== "" && e.target.value.length > 18) return setError1({
        //     state: true, text: "密码不能大于 18 位！"
        // });
    }

    const handleChangePwd2: ChangeEventHandler<HTMLInputElement> = e => {
        // 清空密码错误信息
        setError2({state: false, text: ""});
        // 更改输入信息
        setPassword2(e.target.value);
        // 判断确认密码输入是否一致
        if (e.target.value !== "" && e.target.value !== password1) return setError2({
            state: true, text: "确认密码输入不一致，请检查后再重试！"
        });
    }


    // 提交函数
    const handleSubmit = () => {
        // 清空错误信息
        setError1({state: false, text: ""});
        // 清空确认密码错误信息
        setError2({state: false, text: ""});
        // 判断密码是否为空
        if (password1 === "") return setError1({state: true, text: "密码不能为空！ "});
        // 判断密码是否低于 6 位
        if (password1 !== "" && password1.length < 6) return setError1({state: true, text: "不能低于 6 位！"});
        // // 判断密码是否大于 18 位
        // if (password1 !== "" && password1.length > 18) return setError1({state: true, text: "不能大于 18 位！"});
        // 判断确认密码是否为空
        if (password2 === "") return setError2({state: true, text: "确认密码不能为空！"});
        // 判断确认密码是否输入一致
        if (password2 !== password1) return setError2({state: true, text: "确认密码输入不一致，请检查后再重试！ "});
        // 开始加载
        setLoading(true);
        // 发起请求
        DGConnect.POST(JSON.stringify({type: "register", pwd1: password1, pwd2: password2}), result => {
            // 关闭加载
            setLoading(false);
            // 验证会话是否有效
            if (result['data']['code'] === 999) {
                // 重新流程
                setStep(true);
                // 清空错误信息
                setError1({state: false, text: ""});
                // 清空确认密码错误信息
                setError2({state: false, text: ""});
                // 设置错误信息
                return setError2({
                    state: true,
                    text: result["data"]["message"] + "点击确定将重新注册！错误码：" + result["data"]["code"]
                })
            }
            // 处理确认密码错误
            if (result['data']['code'] === 203) return setError2({
                state: true, text: result["data"]["message"] + "错误码：" + String(result["data"]["code"])
            })
            // 处理其他错误
            if (result["data"]["code"] !== 200) return setError1({
                state: true, text: result["data"]["message"] + "错误码：" + result["data"]["code"]
            });
            // 增加密码信息
            Util.Storage.setSession("REGISTER-PASSWORD", "已设置并验证 ");
            // 成功跳转设置昵称
            switchView("reg_name");
        }, error => {
            // 关闭加载
            setLoading(false);
            // 设置错误信息
            setError2({state: true, text: "遇到了一些问题，请尝试重试，或者及时联系我们！错误信息：" + error["stack"]});
        });
    }

    // DOM 节点
    const ContentView = (<>
        <DGTextView Body Bold>
            接下来，请为您的账户设置一个安全的密码。
            建议使用包含字母、数字和符号的强密码，以确保您的账户安全。
            密码可以是 6 到 18 位之间的任意字符。
        </DGTextView>
        {/* 隐藏的用户名输入框 */}
        <TextField style={{display: "none"}} disabled={true} type="text" autoComplete="username"/>
        {/* 密码输入控制器 */}
        <FormControl
            error={error1.state} disabled={loading} margin="dense"
            variant="standard" autoFocus fullWidth required>
            {/* 密码提示标语 */}
            <InputLabel>请输入密码</InputLabel>
            {/* 密码输入框 */}
            <Input
                autoComplete="new-password" value={password1}
                onChange={handleChangePwd1}
                type={showPwd1 ? 'text' : 'password'} endAdornment={<InputAdornment position="end">
                {/* 显示、隐藏密码图标按钮 */}
                <IconButton
                    disabled={loading} onClick={() => setShowPwd1(!showPwd1)}
                    onMouseDown={e => e.preventDefault()}>
                    {/* 显示、隐藏图标 */}
                    {showPwd1 ? <VisibilityOff/> : <Visibility/>}
                </IconButton>
            </InputAdornment>}/>
            {/* 密码错误信息 */}
            <FormHelperText>{error1.text}</FormHelperText>
        </FormControl>

        {/* 确认密码输入控制器 */}
        <FormControl
            error={error2.state} disabled={loading} margin="dense"
            variant="standard" autoFocus fullWidth required>
            {/* 确认密码提示标语 */}
            <InputLabel>请输入密码</InputLabel>
            {/* 确认密码输入框 */}
            <Input
                autoComplete="new-password" value={password2}
                onChange={handleChangePwd2}
                type={showPwd2 ? 'text' : 'password'} endAdornment={<InputAdornment position="end">
                {/* 显示、隐藏确认密码图标按钮 */}
                <IconButton
                    disabled={loading}
                    onClick={() => setShowPwd2(!showPwd2)}
                    onMouseDown={e => e.preventDefault()}>
                    {/* 显示、隐藏图标 */}
                    {showPwd2 ? <VisibilityOff/> : <Visibility/>}
                </IconButton>
            </InputAdornment>}/>
            {/* 确认密码错误信息 */}
            <FormHelperText>{error2.text}</FormHelperText>
        </FormControl>
    </>);

    // 返回组件节点
    return (<Box>
        {/* DGDialogLayout 样式 */}
        <DGDialogLayout
            submit={{name: step ? "确定" : "继续", click: () => step ? handleReturn() : handleSubmit()}}
            title="设置您的密码" state={state} close={() => handleClose()} load={loading} PANEL>
            {ContentView}
        </DGDialogLayout>
        {/*DGDrawerLayout 样式 */}
        <DGDrawerLayout
            submit={{name: step ? "确定" : "继续", click: () => step ? handleReturn() : handleSubmit()}}
            title="设置您的密码" state={state} close={() => handleClose()} flex="bottom" load={loading} PANEL>
            {ContentView}
        </DGDrawerLayout>
    </Box>);
}
export default DGRegPassword